<template>
  <div class="app-container">
    <div class="content-container" style="flex-direction: row;padding-left: 0;">
      <div style="flex: 0 0 240px;height: 100%;border-right: 1px solid #eee;position: relative;">
        <div class="tit" style="height: 56px;line-height: 56px;padding-left: 16px;border-bottom: 1px solid #eee;"><span>设备列表</span></div>
        <Scrollbar style="position: absolute;top: 56px;left: 16px;right: 0;bottom: 0;">
          <tree
            :nodes="nodes"
            :setting="treeSetting"
            @onClick="treeClick"
          />
        </Scrollbar>
      </div>
      <div style="flex: 1;display: flex; justify-content: center;align-items: center;">
        <VideoMonitor ref="VideoMonitor" style="width: 95%;height: 95%;border: 1px solid rgb(255, 204, 0);" />
        <!-- <div style="width: 90%;height: 90%;border: 1px solid rgb(255, 204, 0);background-color: #4C4B4B;display: flex;justify-content: center;align-items: center;">
          <div
            v-if="deviceInfo"
            id="deviceUrl"
            style="max-width: 80%;"
            :data-clipboard-text="deviceUrl"
            @click="copyUrl"
          >
            <el-link type="primary" style="word-break: break-all;word-wrap: break-word;">{{ deviceUrl }}</el-link>
            <br>
            <el-link type="warning">使用IE打开上方链接（点击复制）</el-link>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
// https://www.jyvtc.edu.cn/dzb/uiFramework/js/zTree-v3.2/api/API_cn.html
import tree from 'vue-giant-tree'
import Clipboard from 'clipboard'
import { listCamera } from '@/api/fjgs/camera'
import Scrollbar from '@/components/Scrollbar'
import { Base64 } from 'js-base64'
import { getToken } from '@/utils/auth'
import VideoMonitor from '@/components/VideoMonitor/video1'
export default {
  components: {
    tree,
    Scrollbar,
    VideoMonitor
  },
  data() {
    return {
      treeSetting: {
        check: {
          enable: false
        },
        view: {
          showIcon: (treeId, treeNode) => {
            return treeNode.level === 1
          }
        }
      },
      deviceList: [],
      deviceInfo: null
    }
  },
  computed: {
    deviceUrl() {
      const cameraPageUrl = window.location.origin + '/camera/index.html'
      if (this.deviceInfo) {
        const deviceInfo = this.deviceInfo
        const obj = {
          ip: deviceInfo.ip,
          port: 8000,
          username: deviceInfo.loginName,
          password: deviceInfo.password,
          token: getToken()
        }
        const params = encodeURIComponent(Base64.encode(JSON.stringify(obj))) // window.btoa(unescape(encodeURIComponent(JSON.stringify(obj))))
        return cameraPageUrl + '?params=' + params
      } else {
        return null
      }
    },
    nodes() {
      const deviceList = this.deviceList
      return deviceList.map(tunenel => {
        const obj = {
          name: `${tunenel.tunnelName}-${tunenel.direction}(${tunenel.onlineNum}/${tunenel.totalNum})`,
          open: true,
          isParent: true,
          id: 'tunnelId_' + tunenel.tunnelId
        }
        if (Array.isArray(tunenel.cameraList)) {
          const cameraList = tunenel.cameraList.map(camera => {
            return {
              name: camera.name,
              isParent: false,
              id: camera.id,
              iconSkin: camera.onlineStatus == 1 ? 'camera_on' : 'camera_off',
              data: camera
            }
          })
          obj.children = cameraList
        }
        return obj
      })
    }
  },
  created() {
    listCamera().then(res => {
      this.deviceList = res.data
    })
  },
  methods: {
    copyUrl() {
      const _this = this
      const clipboard = new Clipboard('#deviceUrl') // 获取点击按钮的元素
      clipboard.on('success', (e) => {
        console.info('Text:', e.text)
        e.clearSelection()
        // 释放内存
        clipboard.destroy()

        _this.msgSuccess('复制成功!')
      })
    },
    treeClick(event, treeId, treeNode) {
      if (!treeNode.isParent) {
        const deviceInfo = treeNode.data
        var url = 'rtsp://' + deviceInfo.loginName + ':' + deviceInfo.password + '@' + deviceInfo.ip + '/Streaming/Channels/1'
        this.$refs.VideoMonitor.init(url)
      }
    }
  }
}
</script>

<style>
.camera_off_ico_docu {
  background-image: url('./camera_off.png');
  background-size: 100% 100%;
}
.camera_on_ico_docu {
  background-image: url('./camera_on.png');
  background-size: 100% 100%;
}
</style>
